<template>
	<div class="add-jq-dialog">
		
		<appdialog 
			ref="dialog"
			:visible="false" 
			width="40%"
			@confirm="confirmAdd"
			@cancle="cancleAdd"
			>
      <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="100px">
        <el-form-item label="角色名：" prop="roleName">
          <el-input v-model="ruleForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="备注：" prop="description">
          <el-input v-model="ruleForm.description"></el-input>
        </el-form-item>
				<el-row>
					<el-col :span="4">
              <el-form-item label="菜单权限："></el-form-item>
					</el-col>
					<el-col :span="10">
								<tree  ref="tree" 
								:treeData="treeData"
								@handleChooseNode="handleChooseNode" 
								v-loading="loading"></tree>
					</el-col>
				</el-row>
        

			
      </el-form>
       
		</appdialog>
		
		
		
	</div>
</template>

<script>

import appdialog from "@/view/components/dialog/dialog";
import tree from './tree.vue'
import { getMenuList, getMenuByRoleId } from '@/service/swagger/MenuController.js'
import { saveRole, updateRole } from '@/service/swagger/RoleController.js'
export default {
	name: "addjs",
	components: {
		appdialog,
		tree
	},
	data() {
		return {
			loading: false,
			treeData: [],
			ruleForm: {
				roleName: '',
				description: '',
				parentRoleId: 0,
				menuIds: []
			},
			rules: {
				roleName: [
					{ required: true, message: '请输入角色名', trigger: 'blur' }
				]
			},
			openType: false,
		}
	},
	mounted() {

	},
	methods: {
		open(val, row) {
			this.openType = val
			if (val) {
				//  获取角色对应菜单树
				this.ruleForm.roleName = row.roleName
				this.ruleForm.description = row.description
				this.ruleForm.id = row.id
				getMenuByRoleId(row.id).then(ret => {
					if (ret && ret.code == 0) {
						// this.treeData.push(ret.data)
						this.treeData = ret.data.children
					}
				})
				console.log('调修改的')
			} else {
				//  获取所有菜单树
				this.loading = true
				getMenuList({}).then(ret => {
					this.loading = false
					if (ret && ret.code == 0) {
						// this.treeData.push(ret.data)
						this.treeData = ret.data.children
					}
				})
				console.log('调新增的')
			}
			this.$refs.dialog.open();
		},
		handleChooseNode(ids) {
			console.log(ids)
			this.ruleForm.menuIds = ids
		},
		confirmAdd() {
			this.$refs['ruleForm'].validate((valid) => {
				if (valid) {
					//打开类型是真就修改是假就新增 openType
					if (this.openType) {
						console.log(this.ruleForm.menuIds,'传给后台的')
						//当修改时候 打开修改 什么也不改 menuIds会传给后台[]，只有更新tree dom才会把所有所有id传给后台
						if(this.ruleForm.menuIds.length){
							this.updateRole()//调修改得
						}else{
              this.cancleAdd()
						}
					} else {
						this.save() //调保存得
					}
				} else {
					this.treeData = []
					setTimeout(() => {
						this.open();
					}, 50)
					return false;
				}
			});
		},
		// 保存菜单
		save() {
			saveRole(this.ruleForm).then(ret => {
				if (ret && ret.code == 0) {
					this.cancleAdd()
					this.$message({ message: '添加角色成功！', type: 'success' })
					this.$emit("addSucess")
				} else {
					this.$message({ message: '添加角色失败', type: 'error' })
					this.cancleAdd()
				}
			})
		},
		//修改菜单
		updateRole() {
			updateRole(this.ruleForm).then(ret => {
				if (ret && ret.code == 0) {
					this.cancleAdd()
					this.$message({ message: '修改成功！', type: 'success' })
					this.$emit("addSucess")
					this.$router.go(0)
				} else {
					this.$message({ message: '修改失败', type: 'error' })
					this.cancleAdd()
				}
			})
		},
		cancleAdd() {
			this.$refs.ruleForm.clearValidate('roleName')
			this.treeData = []
			this.ruleForm = {
				roleName: '',
				description: '',
				parentRoleId: 0,
				menuIds: []
			}
		},
	}
}
</script>

<style scoped lang="scss">
@import "../../../../styles/variables.scss";
</style>